<template>
  <div class="renkoufenlei content-wrapper">
    <div class="part-title">人口类型统计分析</div>
    <chart :config="config" />
  </div>
</template>

<script>
import chart from './chart'
import { randomNum, handleNumber } from '@/utils'
import { bridge } from '@/mixin'
export default {
  components: { chart },
  mixins: [bridge],
  data() {
    return {
      config: {
        xAxisData: ['户籍人口', '流动人口', '境外人口'],
        seriesData: [],
        yAxis: {
          min: 0,
          max: 1,
          interval: 0.2,
        }
      }
    }
  },
  methods: {
    refreshData() {
      const dataLength = this.config.xAxisData.length
      let resData = []
      let sum = 0
      for (let i = 0; i < dataLength; i++) {
        if (i === 0) {
          const currentData = randomNum({ max: 100 }, 1)
          resData.push(currentData[0])
        } else if (i === dataLength - 1) {
          resData.push(100 - sum)
        } else {
          const currentData = randomNum({ max: 100 - sum }, 1)
          resData.push(currentData[0])
        }
        sum += resData[i]
      }
      this.config.seriesData = resData
      this.config.yAxis.max = handleNumber(Math.max(...resData))
      this.config.yAxis.interval = this.config.yAxis.max / 5
    }
  },
}
</script>

<style lang="scss" scoped>
.renkoufenlei {
  width: 39.0909rem;
  height: 21.4545rem;
  background-image: url('~@/views/screen-1/images/renkoufenlei.png');
  background-size: cover;
  background-position: center center;
}
</style>
